<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日志主页</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="../static/jquery-easyui-1.4.1/jquery.js"></script>
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/gray/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){	
		//datagrid数据表格
		$('#t_journal').datagrid({
			idField:'id', //只要创建数据表格必须要加idField
			striped:true, //隔行变色
			url:'list', //异步加载数据路径
			//title:'数据表格', //表头
			width:'100%', //宽度
			fitColumns: true, //自动宽度
			height:645, 
			loadMsg: '数据正在加载...请耐心等待....', //在从远程站点加载数据的时候显示提示消息
			rownumbers: true, //在表格前面显示行号
			sortName: 'handletime',
			sortOrder: 'desc',
			nowrap:true, //折行显示
			remoteSort:false, //取消本地排序
			frozenColumns:[ //冻结列，不能与fitColums一起使用
				[
					{
						field:'ck',
						width:50,
						checkbox:true //复选框 与singleSelect冲突
					}
				]
			],
			columns:[
				[	
					{
						field:'handlename',
						title:'操作人姓名',
						width:120,
						align:'center'
					},{
						field:'handleuser',
						title:'操作人用户名',
						width:120,
						align:'center'
					},{
						field:'handle',
						title:'操作功能',
						width:120,
						align:'center'
					},{
						field:'handletime',
						title:'操作时间',
						width:150,
						align:'center',
						sortable:true
					},{
						field:'details',
						title:'功能详情',
						width:180,
						align:'center'
					}
				]
			],
			pagination:true, //设置分页
			pageSize:50, //设置开始显示几条数据
			pageList:[50,150,300,500], //设置分页条数
		});
		//查询
		$('#searchbtn').click(function(){
			$('#t_journal').datagrid('load',serializeForm($('#mysearch')));
		});
		//清空查询
		$('#clearbtn').click(function(){
			$('#mysearch').form('clear'); //清空表单数据
			$('#t_journal').datagrid('load',{}); //重新刷新表格
		});
		
	});	
	
	//js方法：序列化表单
	function serializeForm(form){
		var obj = {};
		$.each(form.serializeArray(),function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ','+this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
</script>
</head>
<body>
	<div id="lay" fit=true style="width: 100%;height: 100%;">
		<div region="north" title="学院查询" style="height:26px;">
			<form id="mysearch" method="post">
				 <div class="input_container">
				 	<input class="easyui-textbox" label="操作人姓名" labelPosition="top" data-options="prompt:'姓名',iconCls:'icon-user2'" style="width:200px;height:26px;" name="handlename">
				 	&nbsp;
				 	<input class="easyui-textbox" label="用户名" labelPosition="top" data-options="prompt:'用户名',iconCls:'icon-user1'" style="width:200px;height:26px;" name="handleuser">
				 	&nbsp;
				 	<input class="easyui-textbox" label="功能" labelPosition="top" data-options="prompt:'功能',iconCls:'icon-lock'" style="width:200px;height:26px;" name="handle">
				 	&nbsp;
				 	<a id="searchbtn" class="easyui-linkbutton"  iconCls='icon-search'>查询</a>
					<a id="clearbtn" class="easyui-linkbutton" iconCls='icon-undo'>清空</a>
				 </div>
			</form>
		</div>
		<div region="center">
			<table id="t_journal"></table>
		</div>
	</div>
</body>
</html>